﻿@model Tuple<System.Collections.Generic.List<MvcShopping.Models.ProductCategory>, System.Collections.Generic.List<MvcShopping.Models.Product>>

@*@ViewData["member"] IEnumerable<MvcShopping.Models.Procuct>*@
@{
    var ajaxOption = new AjaxOptions()
    {
        OnSuccess = "AddToCartSuccess",
        OnFailure = "AddToCartFailure",
        HttpMethod = "Post"
    };
}
@section scripts {

    @Scripts.Render("~/bundles/jqueryval")
    <script>
        var M = {}
        function AddToCartSuccess() {
            if (M.dialog11) {
                return M.dialog11.show();
            }
            M.dialog11 = jqueryAlert({
                'icon': 'images/alert/right.png',
                'animateType': 'scale',
                'content': '加入购物车成功',
                'closeTime': 2000,
            })
        }
        function AddToCartFailure(xhr) {
            if (M.dialog11) {
                return M.dialog11.show();
            }
            M.dialog11 = jqueryAlert({
                'icon': 'images/alert/error.png',
                'animateType': 'scale',
                'content': '加入购物车失败',
                'closeTime': 2000,
            })
            //alert('加入购物车失败 (HTTP 状态码: ' + xhr.status + ')');
        }
    </script>
}
@section Styles{
    <style type="text/css">
        .list {
            
            color: dimgray;
        }
        </style>
   
    
    }
<link href="~/Content/alert.css" rel="stylesheet" />
<script src="~/Scripts/alert.js"></script>
<div class="col-md-3" style="padding-left:0;">
    <div id="left">

        <h2 class="text-info" style="font-weight:bold;line-height:50px;padding-left:20px;margin-bottom:20px;color:dimgray">类别</h2>
        <ul id="productcategory" class="nav navbar-default nav-stacked" style="margin-bottom:20px">

            @foreach (var item in Model.Item1)
            {
                <li class="active" style="border-bottom:6px solid white;font-size:17px;background-color:aliceblue;">
                    @Html.ActionLink(item.Name, "ProductList", new{id = item.Id}, new { @class = "list" } )
                </li>
            }
        </ul>
    </div>
</div>

<div class="col-md-9 col-xs-12 row" style="margin-top:20px;padding-right:0;margin-left:3px;">

    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="~/images/testimg/goodsdetail/轮播2.jpg" alt="First slide" style="height:300px;padding:0px;" class="col-md-12" />

                @*<div class="carousel-caption">标题 1</div>*@
            </div>
            <div class="item">
                <img src="~/images/testimg/goodsdetail/轮播4.jpg" alt="First slide" style="height:300px;padding:0px;" class="col-md-12" />
                @*<div class="carousel-caption">标题 2</div>*@
            </div>
            <div class="item">
                <img src="~/images/testimg/goodsdetail/轮播3.jpg" alt="First slide" style="height:300px;padding:0px;" class="col-md-12" />
                @*<div class="carousel-caption">标题 3</div>*@
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel"
           data-slide="prev" style="font-size:100px;height:300px;line-height:300px">
            &lsaquo;
        </a>
        <a class="carousel-control right" href="#myCarousel"
           data-slide="next" style="font-size:100px;height:300px;line-height:300px">
            &rsaquo;
        </a>
    </div>
</div>

<div class="col-xs-12" style="padding-left:0;margin-top:20px;">
    <div class="col-xs-6 table-bordered"  style="border-radius:3px; padding-top:10px;padding-bottom:10px;">
        <iframe allowtransparency="true" frameborder="0" width="565" height="64" scrolling="no" src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=2&d=3&bd=0&k=000000&f=804000&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=57091&w=565&h=64&align=left"></iframe>
    </div>
    
    <div class="col-xs-6" >
        <a><img class="table-bordered" style="height:88px; width:508px;border-radius:3px;" src="~/images/guanggao.jpg" /></a>
    </div>
</div>

<div class="col-md-12" style="margin-top:35px;padding-right:0;" id="hotsale">
    <div class="col-md-12" style="border-bottom:1px solid #E0D8D8">
        @*<span style="display:inline-block;margin-right:15px;height:35px;width:8px;background-color:darkblue;"></span>*@
        <p style="display:inline-block;height:35px;font-size:17px;line-height:35px;">
            <span class="glyphicon glyphicon-globe text-primary" style="font-size:17px;"></span>  热销产品
        </p>
    </div>

    <ul class="list-group col-md-12" style="padding-top:20px;">
        @{
            int i = 0;
        }
        @foreach (var item in Model.Item2)
        {
            i++;
            if (i > 8)
            {
                break;
            }
            <li class="col-md-3 list-group-item hotshop" style="border:0;height:280px;margin-bottom:5px;">

                <img alt="@item.Description" src="~/@item.Url" />

                <p class="row">
                <p class="col-xs-6 text-left" style="padding-left:0;margin-left:0">
                    @Html.ActionLink(item.Name, "ProductDetail", new { id = item.Id }, new { color = "black", @class = "black" })
                </p>

                <p class="col-xs-6 text-right">
                    @Ajax.ActionLink("加入购物车", "AddToCart", "Cart", new { ProductId = item.Id }, ajaxOption, new { color = "#C2C3C9", @class = "grey addToCart" })
                </p>
                </p>
                <p class="text-center text-danger">
                    $ @Html.DisplayFor(modelItem => item.Price)元
                </p>
            </li>
        }
    </ul>

</div>

<script>
        $(function () {

            $(".hotshop").hover(function () {

                $(this).animate({ 'opacity': 0.6 }).css({ 'border': "3px solid grey" });
            }, function () {
                $(this).css({ 'border': "0" }).animate({ 'opacity': 1 });
            });
        });
</script>




@*<div id="left">
        <h2>商品类别</h2>
        <ul id="productcategory">

            @foreach (var item in Model.Item1)
            {
                <li>
                    @Html.ActionLink(item.Name, "ProductList", new
           {
               id = item.Id
           })
            </li>
            }
        </ul>
    </div>
    <div id="right">
        <h3>热门商品</h3>
        <form action="Home/ProductSearch" method="post">
            <input type="text" name="searchcontent" />
            <input type="submit" value="搜索" />
        </form>

        <ul>
            @{
                int i = 0;
            }
            @foreach (var item in Model.Item2)
            {
                i++;
                if (i > 6)
                {
                    break;
                }
                <li>
                    <img alt="" src="@item.Url" />
                    @Html.ActionLink(item.Name, "ProductDetail", new { id = item.Id })
                    @Html.DisplayFor(modelItem => item.Price)元
                    @Ajax.ActionLink("加入购物车", "AddToCart", "Cart", new { ProductId = item.Id }, ajaxOption)
                </li>
            }


        </ul>

    </div>*@